今天繼續昨天的Ajax的分享，
今天分享到後端的部分，
首先在Controller這邊接收Post資料
[HttpPost]
public ActionResult Village(string id = "")
{
List<Village> list = db.GetVillageList(id);
string result = "";
if (list == null)
{
//讀取資料庫錯誤
return Json(result);
}
else
{
result = JsonConvert.SerializeObject(list);
return Json(result);
}
}
先從資料庫抓出List資料，
然後使用之前介紹的第三種方式Json.Net轉換成Json文字，
再回傳到前端讓頁面接收，
下面是抓List資料的Function
public List<Village> GetVillageList(string id)
{
try
{
Connect();
string sql = @" SELECT `VillageId`, `Village` FROM `Village` WHERE `CityId` = @cityId";
MySqlCommand cmd = new MySqlCommand(sql, conn);
cmd.Parameters.Add("@cityId", id);
List<Village> list = new List<Village>();
using (MySqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
Village data = new Village();
data.VillageId = dr["VillageId"].ToString();
data.VillageName = dr["Village"].ToString();
list.Add(data);
}
}
return list;
}
catch (Exception ex)
{
string error = ex.ToString();
return null;
}
finally
{
Disconnect();
}
}
如此結合昨天的前端部分，
就完成了Ajax完整的流程。
--
小弟不才，
如果有謬誤或是要補充的，
都歡迎一起來討論！
string sql = "SELECT VillageId,Village FROM Village Where CityId=" + id;
如果id是數字還好,
文字就不適合這樣寫了.
string sql = "select VillageId,Village from Village where CityId=@CityId";
cmd.Parameters.AddWithValue("@CityId", id);
請問我這樣寫法好嗎，因為原文好像沒有把cityId的篩選條件寫上去，他會拿到所有的village資料
itsteven wilson1966
之後漏寫CityId了...
剛剛有修正了,
不過沒有實機測試過,
看起來應該是沒有錯吧...
要用AddWithValue應該也可以,
實機跑看看能不能跑就知道了.
我都按照大大的步驟走 沒錯誤但都沒成功啟動change的感覺
請問可能是什麼原因呢?
try {
$("#city").change(function () {
var value = $("#city").val();
console.log(value);
$.ajax({
type: "Post",
url: "../Home/Village?id=" + value,
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (data) {
$("#village").empty();
if (data == "") {
$("#village").append("<option value=''>請選擇縣111</option>");
}
else {
var jo = JSON.parse(data);
$("#village").append("<option value=''>請選擇333</option>");
for (i = 0; i < jo.length; i++) {
$("#village").append("<option value='" + jo[i].VillageId + "'>" + jo[i].VillageName + "</option>");
}
}
},
failure: function (errMsg) {
$("#village").empty();
$("#village").append("<option value=''>請選擇縣222</option>");
}
})
});
}
catch (e) {
logMyErrors(e) // 把例外物件傳給錯誤處理器)
}
F12是個好東西,
先確認是後端的問題的還是前端的問題,
然後...你有載入jQuery了嗎?
阿果然是jQuery的問題
後來改路徑就Ok了 感謝
學了會看F12之外也上了寶貴的一課
iThome鐵人賽
看影片追技術